<template>
  <div class="task-form">
    <XcForm class="form-view" ref="formView" :config="config" :values="formData" :colProps="4" labelPosition="right">
    </XcForm>
    <div class="btn-box">
      <el-button type="primary" size="large" @click="emit('prev')">上一步</el-button>
      <el-button type="primary" size="large" :disabled="!formView?.data.name" :loading="btnLoading"
        @click="handleNext">下一步</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import { isEmail, isMobile, isPhone, isZipCode } from "../../utils/validate";
import type { ColumnItem } from "@xc-components/xc-form/types";
import { startCreateTask } from "../../api/task/index";
import type { CreateTaskParams, SolutionItem } from "../../api/task/index.d";
import type { XcFormInstance } from "@xc-components/xc-form/types";

const props = withDefaults(defineProps<{ solution: Partial<SolutionItem> }>(), {
  solution: () => ({})
});
const emit = defineEmits(["prev", "next"]);
const formView = ref<XcFormInstance>();
const config = ref<ColumnItem[]>([
  { label: "基础信息", type: "title" },
  { label: "任务名称", prop: "name", required: true },
  { label: "申请单位信息", type: "title" },
  { label: "单位名称", prop: "applicantCompany" },
  { label: "通信地址", prop: "address" },
  { label: "邮政编码", prop: "zipCode", rules: validatorFn([isZipCode], "邮政编码") },
  { label: "电话", prop: "tel", rules: validatorFn([isMobile, isPhone], "电话") },
  { label: "经办人", prop: "person" },
  { label: "电子信箱", prop: "email", rules: validatorFn([isEmail], "电子信箱") },
  { label: "设备信息", type: "title" },
  { label: "设备名称", prop: "dutName" },
  { label: "设备型号", prop: "dutMode" },
  { label: "序列号", prop: "deviceNum" },
  { label: "生产单位", prop: "manufacturer" },
  { label: "检测类型", prop: "testType" },
  { label: "委托单位", prop: "client" },
  // { label: "测试条件", type: "title" },
  // { label: "温度", prop: "temperature", inputType: "number", unit: "℃" },
  // { label: "湿度", prop: "humidity", inputType: "number", unit: "%" }
]);
const formData = ref<Partial<CreateTaskParams>>({});
const btnLoading = ref(false);

function validatorFn(condition: Function[], label: string) {
  return [
    {
      validator(_rule: any, value: string, callback: (Error?: Error) => void) {
        if (value === "" || condition.find((it) => it(value))) {
          callback();
        } else {
          callback(new Error(`请输入正确的${label}`));
        }
      },
      trigger: "blur"
    }
  ];
}
const handleNext = async () => {
  try {
    const value = await formView.value?.submit();
    console.log("值：", value);
    btnLoading.value = true;
    const { id, name, version } = props.solution;
    const { data } = await startCreateTask({
      ...value,
      id,
      solutionName: name,
      solutonVersion: version
    });
    btnLoading.value = false;
    if (!data) { return; }
    emit("next", data);
  } catch (err) {
    console.log(err);
    btnLoading.value = false;
  }
};

// const commonMsgEventName = "CommonMessageEvent";
// type EventData = { dataName?: string; data: any };
// const handleEvent = (param: EventData) => {
//   const { data } = param || {};
//   switch (data.messageType) {
//     case "Error":
//       ElMessage.error(data.message || "错误");
//       break;
//     case "Warning":
//       ElMessage.warning(data.message || "警告信息");
//       break;
//     case "Info":
//       ElMessage.info(data.message || "提示信息");
//       break;
//   }
// }

</script>

<style lang="scss" scoped>
.task-form {
  padding: 40px;
  height: calc(100% - 80px);
  display: flex;
  flex-direction: column;

  .form-view {
    flex: 1;
  }

  .btn-box {
    text-align: center;
    padding: 30px 0;
  }
}
</style>
